<template>
	<view>
		<view  v-for="(item,index) in approveList" :key="index">
			<groupOrUserItem :avatarUrl="item.avatarUrl" :name="item.nickname">
				<template #groupName>
					<view>申请加入团：{{item.groupName}}</view>
				</template>
				<template #application>
					<view :class="item.status==='批准加入'? 'ingroup':'rejectInGroup'" v-if="item.status==='批准加入' || item.status==='拒绝加入'">
						{{item.status}}
					</view>
					<view v-else @click="application(item)">审批</view>
				</template>
			</groupOrUserItem>
		</view>
		
	</view>
	
</template>

<script>
	import {getApproveList,approve} from '@/api/group.js'
	import groupOrUserItem from '../../../src/components/groupOrUserItem/groupOrUserItem.vue'
	export default {
		components: {
		    groupOrUserItem
		},
		onShow() {
			this.getList()
		},
		data() {
			return {
				approveList:[],
				Arr:[
					{
						avatarUrl:'../../static/images/gugou/icon2.png',
						nickname:'111',
						groupName:'乌鸦饲养协会'
					},
					{
						avatarUrl:'../../static/images/gugou/icon1.png',
						nickname:'222',
						groupName:'爱生活lovelive'
					},
				]
			};
		},
		methods:{
			getList(){
				getApproveList().then(res=>{
					if(res.data.code==200){
						this.approveList=res.data.data
					}
				})
			},
			application(user){
				uni.showModal({
					title: '提示',
					content: `是否同意${user.nickname}加入团${user.groupName} ?`,
					cancelText: "拒绝", // 取消按钮的文字  
					confirmText: "同意", // 确认按钮文字  
					success: function(res) {
						if (res.confirm) {
							let data={
								id:user.id,
								status:'批准加入'
							}
							approve(data).then(res=>{
								if(res.data.code==200){
									uni.redirectTo({
										url:'/pages/my/application'
									})
								}
							})
						} else if (res.cancel) {
							let data={
								id:user.id,
								status:'拒绝加入'
							}
							approve(data).then(res=>{
								if(res.data.code==200){
									uni.redirectTo({
										url:'/pages/my/application'
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.groupName{
	font-size: 22rpx;
}
.applicationBtn{
	position: absolute;
	right: 40rpx;
	width: 130rpx;
	height: 50rpx;
	border-radius: 10rpx;
	font-size: 32rpx;
	line-height: 50rpx;
	text-align: center;
	background-color: #89C3DB;
	color: #fff;
}
.ingroup{
	background-color: #fff;
	color:#89C3DB;
}
.rejectInGroup{
	color:red;
	background-color: #fff;
}
</style>
